import * as React from 'react';
import { useState } from 'react';
import {
    Avatar,
    Card,
    Container,
    List,
    ListItem,
    ListItemAvatar,
    ListItemButton,
    ListItemText,
    Typography,
} from '@mui/material';
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
import { defaultTheme as RaDefaultTheme, RaThemeOptions } from 'react-admin';
import FolderIcon from '@mui/icons-material/Folder';
import { Application } from './types';
import { NewApplicationForm } from './NewApplicationForm';
import {
    loadApplicationsFromStorage,
    storeApplicationsInStorage,
} from './applicationStorage';

const PREFIX = 'ApplicationsDashboard';

const classes = {
    main: `${PREFIX}-main`,
    title: `${PREFIX}-title`,
    applications: `${PREFIX}-applications`,
    logo: `${PREFIX}-logo`,
};

const StyledContainer = styled(Container)(({ theme }) => ({
    [`&.${classes.main}`]: {
        width: '100vw',
        height: '100vh',
        display: 'flex',
        paddingTop: theme.spacing(4),
        flexDirection: 'column',
        background:
            'linear-gradient(135deg, #00023b 0%, #00023b 50%, #313264 100%)',
    },

    [`& .${classes.title}`]: {
        color: (theme.vars || theme).palette.common.white,
        marginBottom: theme.spacing(4),
        textAlign: 'center',
    },

    [`& .${classes.applications}`]: {
        marginTop: theme.spacing(4),
    },

    [`& .${classes.logo}`]: {
        height: 100,
    },
}));

const defaultTheme = createTheme(RaDefaultTheme);

export const ApplicationsDashboard = ({
    onApplicationSelected,
    theme = defaultTheme,
}: {
    onApplicationSelected: any;
    theme: RaThemeOptions;
}) => (
    <ThemeProvider theme={createTheme(theme)}>
        <Applications onApplicationSelected={onApplicationSelected} />
    </ThemeProvider>
);

const Applications = ({ onApplicationSelected }) => {
    const [applications, setApplications] = useState<Application[]>(() =>
        loadApplicationsFromStorage()
    );

    const handleApplicationCreated = application => {
        setApplications(previous => {
            const newApplications = [...previous, application];
            storeApplicationsInStorage(newApplications);
            return newApplications;
        });
    };

    return (
        // @ts-ignore
        <StyledContainer component="main" className={classes.main}>
            <img
                className={classes.logo}
                src=""
                alt="react-admin logo"
            />
            <Typography component="h2" variant="h2" className={classes.title}>
                Welcome to React-admin
            </Typography>
            <NewApplicationForm
                applications={applications}
                onApplicationCreated={handleApplicationCreated}
            />
            {applications.length > 0 && (
                <Card className={classes.applications}>
                    <List>
                        {applications.map(application => (
                            <ListItem key={application.name} disablePadding>
                                <ListItemButton
                                    onClick={() =>
                                        onApplicationSelected(application)
                                    }
                                >
                                    <ListItemAvatar>
                                        <Avatar>
                                            <FolderIcon />
                                        </Avatar>
                                    </ListItemAvatar>
                                    <ListItemText
                                        primary={application.name}
                                        secondary={new Date(
                                            application.created_at
                                        ).toLocaleDateString()}
                                    />
                                </ListItemButton>
                            </ListItem>
                        ))}
                    </List>
                </Card>
            )}
        </StyledContainer>
    );
};
